<template>
	<div class="login-container" style="position: relative">
		<!-- <vol-header :back="false" title="天罡助剂"></vol-header> -->
		<image src="../../assets/back.png" alt="" style="width: 100vw; height: 100vh" />
		<div style="width: 100%; position: absolute; top: 23%">
			<div style="
          width: 100px;
          height: 100px;
          background: #ffffff;
          transform: rotate(45deg);
          position: relative;
          box-shadow: 5px 5px 5px 5px #e9f1fe;
          border-radius: 15px;
          margin: 0 auto;
          margin-top: 10px;
        ">
				<image src="../../assets/Logo.png" alt="logo" style="
            position: absolute;
            transform: rotate(-45deg);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
						width:70%;
						height:70%
          " />
			</div>
			<!-- <div class="boximg">
        <img
          src="@/assets/loginlogo.jpg"
          alt="logo"
          width="100%"
          height="300px"
        />
      </div> -->
			<div class="login-input" style="margin-top: 10%">
				<uni-forms ref="form" :modelValue="userInfo" label-width="80px">
					<uni-forms-item class="formItem" label="用户名" name="userName" :rules="$rules.handle.userName">
						<uni-easyinput prefixIcon="contact" v-model="userInfo.userName" placeholder="请输入用户名"
							:adjust-position="false" />
					</uni-forms-item>
					<uni-forms-item class="formItem" label="密码" name="password" :rules="$rules.handle.password">
						<uni-easyinput type="password" prefixIcon="locked-filled" v-model="userInfo.password"
							placeholder="请输入密码" :adjust-position="false" />
					</uni-forms-item>
				</uni-forms>

			</div>
			<div class="login-btn">
				<button round type="primary" :loading="loading" @click="login">登录</button>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		SubmitLogin,
		GetOperatorInfo
	} from "@/api/interface.js";

	export default {
		// components: {
		// },
		data() {
			return {
				codeImgSrc: "",
				loading: false,
				userInfo: {
					userName: "",
					password: "",
				},
			};
		},
		onLoad() {

		},
		methods: {
			// getVierificationCode() {
			//   this.http.post("api/User/getVierificationCode").then(x => {
			//     this.codeImgSrc = "data:image/png;base64," + x.img;
			//     this.userInfo.UUID = x.uuid;
			//   });
			// },
			// 获取用户信息
			GetOperatorInfoData() {
				var that = this
				GetOperatorInfo().then(res => {
					if (res.Success) {
						console.log('程工了获取用户信息-------------------------------', res.Data)
						// 存储用户信息
						this.$store.commit("getLoginUserInfo", res.Data)
						this.$sucessToast("登录成功");
						setTimeout(function() {
							uni.switchTab({
								url: "/pages/index/index"
							})
							that.loading = false
						}, 1300)

					} else {
						that.loading = false
						this.$errorToast(res.Msg);
					}
				}).catch(err => {
					that.loading = false
					this.$errorToast(err);
				})
			},

			// 登录
			login() {
				var that = this
				this.$refs.form.validate().then(res => {
					console.log('是否通过了', res)
					console.log('denglu le ', this.userInfo)
					uni.showLoading({
						title: '登录中'
					})
					this.loading = true
					SubmitLogin(this.userInfo).then(res => {
						if (res.Success === true) {
							// 存储token
							uni.setStorageSync('token', res.Data)
							// 获取登录用户信息
							this.GetOperatorInfoData()
						} else {
							that.loading = false
							this.$errorToast(res.Msg);
						}
					})

				}).catch(err => {
					uni.hideLoading()
					that.loading = false
				})
			},
		},
	};
</script>
<style lang="less" scoped>
	page {
		height: 100%
	}

	.center {
		text-align: center;
	}

	.boximg {
		text-align: center;
	}

	h2 {
		padding-left: 40px;
		padding-top: 1rem;
		margin-bottom: 8px;
		font-size: 21px;
		font-weight: 500;
		text-align: left;
	}

	.login-container {
		width: 100vw;
		height: 100vh;

		.login-logo {
			text-align: center;

			img {
				width: 100%;
			}
		}

		.login-input {
			padding: 1rem 1.5rem;

			img {
				height: 20px;
				position: relative;
			}

			.formItem {
				padding-bottom: 20rpx;
			}

			.submitButton {
				position: fixed;
				padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
				padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
				bottom: 20rpx;
				width: 100%;

				button {
					margin-right: 40rpx;
					height: 80rpx;
					border-radius: 10rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}
		}

		.login-btn {
			padding: 1rem 1.5rem;

			>button {
				border-radius: 7px;
				font-size: 14px;
			}
		}

		.register {
			text-align: right;

			a {
				color: #a7a7a7;
				padding-right: 1rem;
				font-size: 13px;
			}
		}

		.login-account {
			position: relative;
			padding: 0rem 1.7rem;
			color: #afafaf;
			font-size: 13px;

			a:last-child {
				float: right;
			}
		}

		.login-line {
			margin-top: 1rem;
		}

		.login-other {
			display: flex;

			.item {
				img {
					height: 50px;
				}

				flex: 1;
				text-align: center;
				margin-top: 8px;
				padding: 0 4px;
				color: #646566;
				font-size: 12px;
			}
		}
	}

	.footer {
		width: 100%;
		bottom: 0;
		margin: 48px 0 24px;
		text-align: center;

		.copyright {
			margin-top: 150px;
			color: rgba(0, 0, 0, 0.45);
			font-size: 14px;

			a {
				color: rgba(0, 0, 0, 0.45);
				transition: all 0.3s;
			}
		}
	}
</style>